
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>我的电商系统</title>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>public/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>public/css/bootstrap-theme.min.css">
	<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>public/css/fornt.css">
</head>
<body id="detail">
<?php $this->load->view('header');?>
<br />
<div class="container">
	<div class="row">
		<div class="col-md-6 main_left">
			<div id="product_img">
				<!-- 图片的放大和清晰显示 data-zoom-image是右边显示的大图-->
				<img id="product_main_img" src="<?php echo base_url($product->img)?>" data-zoom-image="<?php echo base_url($product->img)?>" />
			</div>
			<ul id="main_footer" class="main_footer clearfix">
			<?php foreach($imgs as $i){?>
				<li class=""><img src="<?php echo base_url($i->url)?>"></li>
			<?php }?>
			</ul>
		</div>
		<div class="col-md-6 main_right ">
			<h4><?php echo $product->title;?></h4>
			<table class="detail_table">
				<tr>
					<td class="ls">价格：</td>
					<td class="price">￥2399</td>
				</tr>
				<tr>
					<td class="ls">商品评分：</td>
					<td class="star">
					<?php for($i=0;$i<5;$i++){
						if($i< $product->star){
					?>
						<i class="glyphicon glyphicon-star"></i>
					<?php }else{?>
						<i class="glyphicon glyphicon-star-empty"></i>
					<?php 
						} }
					?>
					</td>
				</tr>
				<tr>
					<td class="ls">运费：</td>
					<td>满99免运费</td>
				</tr>
			<form action="<?php echo site_url('shopping/addTOCart')?>" method="post">
				<input type="hidden" name="product_id" value="<?php echo $product->id;?>" />
				<tr>
					<td class="ls">购买数量：</td>
					<td>
						<span id="num_left"><i class="glyphicon glyphicon-minus"></i></span>
						<input id="num" name="num" type="text" value="1">
						<span id="num_right"><i class="glyphicon glyphicon-plus"></i></span>
					</td>
				</tr>
				<tr>
					<td class="ls deliver">送货：</td>
					<td class="deliver">由仓库全国最近点 发货，并提供售后服务。如有问题咨询在线客服~!
						上午08:30前完成下单下午送达,下午下单隔日第二天送达.</td>
				</tr>
			</table>
			<a href="#" class="now_buy btn btn-success btn-sm">立即购买</a>
			<button type="submit" class="add_shopcart btn btn-danger btn-sm">加入购物车</button>
		</form>
		</div>
	</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
</div>
	
</body>
	<script type="text/javascript" src="<?php echo base_url();?>public/js/jquery.js"></script>
	<script type="text/javascript" src="<?php echo base_url();?>public/js/jquery.elevateZoom-3.0.8.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url();?>public/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(function(){
    	/* 左侧下边的图片在上面显示*/
    	$('#main_footer li').mouseover(function(){
    		$('#main_footer li').removeClass('hover');
    		$(this).addClass('hover');
    		var src=$(this).find('img').attr('src');
    		$('#product_main_img').attr('src',src);
    		//使放大和清晰的图片是所点击的图片
    		$('.zoomWindowContainer div').css('background-image','url("'+src+'")');
    	});
    	/*购物数量的增减*/
    	$('#num_right').click(function(){
    		var sum=$('#num').val();
    		sum=parseInt(sum)+1;
    		$('#num').val(sum);
    	});
    	$('#num_left').click(function(){
    		var sum=$('#num').val();
    		sum=parseInt(sum)-1;
    		if(sum>0){
    			$('#num').val(sum);
    		}
    	});
    	/** 将下边的图片放大，更加清楚地显示*/
    	$('#product_main_img').elevateZoom({
			zoomWindowWidth : 400,
			zoomWindowHeight: 400

	    });
    })
    /**数量的增减用js实现方法**/
    // var num_left=document.getElementById('num_left');
    // var num=document.getElementById('num');
    // var num_right=document.getElementById('num_right');
    // var sum=1;
   	// num_right.onclick=function(){
   	// 	if(sum<9){
   	// 		sum++;
   	// 	num.value=sum;
   	// 	}
   	// }
   	// num_left.onclick=function(){
   	// 	if(sum>1){
   	// 		sum--;
   	// 	num.value=sum;
   	// 	}
   	// }
    </script>
    
</html>